<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./plugins/layui/css/layui.css">
  <link rel="stylesheet" href="./plugins/layui/css/layui-my.css">
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <div class='content'>
    <h5 class="content-title">管理层人员机构</h5>
    <div class='box'>
      <div class="box-body">
        <ul class="nav-tabs clearfix">
          <li class="nav-item active" data-target = "#tabPanel1">
            现任管理层
          </li>
          <li class="nav-item" data-target="#tabPanel2">
            离任管理层
          </li>
        </ul>
        <div class="tab-panel-wrap">
          <div class="tab-panel active" id="tabPanel1">
            <table id="demoTreeTb1"></table>
          </div>
          <div class="tab-panel" id="tabPanel2">
            <table id="demoTreeTb2"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./plugins/jquery/jquery.min.js"></script>
  <script src="./plugins/layui/layui.js"></script>
  <script>
    $('.nav-tabs li').on('click', function() {
      $(this).addClass('active').siblings().removeClass('active')
      var target = $(this).data('target')
      if(target) {
        $(target).addClass('active').siblings().removeClass('active')
      }
    })
    // 参考文档地址
    // https://gitee.com/whvse/treetable-lay/wikis/pages?sort_id=1986093&doc_id=142114
    var insTb;
    layui.config({
      base: './plugins/layui/'
    }).use(['treeTable'], function () {
      var $ = layui.jquery;
      var treeTable = layui.treeTable;
      $('body').removeClass('layui-hide');

      // 渲染表格
      insTb = treeTable.render({
        elem: '#demoTreeTb1',
        toolbar: true,
        tree: {
          iconIndex: 2
        },
        cols: [
          [{
              type: 'numbers'
            },
            // {type: 'checkbox'},
            // {field: 'id', title: 'ID'},
            {
              field: 'name',
              title: '姓名'
            },
            {
              field: 'job',
              title: '职务'
            },
            {
              field: 'createTime',
              title: '任职日期'
            },
            {
              field: 'sex',
              title: '性别'
            },
            {
              field: 'country',
              title: '国籍'
            },
            {
              field: 'edu',
              title: '学历'
            },
            {
              field: 'born',
              title: '出生年月'
            },
            // {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
          ]
        ],
        reqData: function (data, callback) { // 懒加载也可以用url方式，这里用reqData方式演示
          // setTimeout(function () {  // 故意延迟一下
          //     var url = 'json/list';
          //     url += ((data ? ('_' + data.id) : '') + '.json');
          //     $.get(url, function (res) {
          //         callback(res.data);
          //     });
          // }, 800);

          //json参考数据
          //{"code": 200, "data": [{"id": "1", "name": "xxx", "haveChild": true}]}

          setTimeout(function () { // setTimeout 模拟请求时间
            var data = [{
              id: '1',
              name: '张三',
              job: 'CEO',
              createTime: '2021-09-02',
              sex: '男',
              country: '中国',
              edu: '幼儿园',
              born: '1998-07-01',
              haveChild: true
            }, {
              id: '2',
              name: '朱五六',
              job: 'CEO',
              createTime: '2021-09-02',
              sex: '男',
              country: '中国',
              edu: '幼儿园',
              born: '1998-07-01',
              haveChild: false
            }]
            callback(data);
          }, 800)

        },
        style: 'margin-top:0;',
        tree: {
          arrowType: 'arrow3', // 自定义箭头风格
          getIcon: function (d) { // 自定义图标
            // d是当前行的数据
            return '<i class="icon"></i>';
          },
          iconIndex: 1, // 折叠图标显示在第几列
          idName: 'name', // 自定义id字段的名称
          haveChildName: 'haveChild' // 自定义标识是否还有子节点的字段名称
        }
      });

    });

    

    layui.config({
      base: './plugins/layui/'
    }).use(['treeTable'], function () {
      var $ = layui.jquery;
      var treeTable = layui.treeTable;
      $('body').removeClass('layui-hide');

      // 渲染表格
      treeTable.render({
        elem: '#demoTreeTb2',
        toolbar: true,
        tree: {
          iconIndex: 2
        },
        cols: [
          [{
              type: 'numbers'
            },
            // {type: 'checkbox'},
            // {field: 'id', title: 'ID'},
            {
              field: 'name',
              title: '姓名'
            },
            {
              field: 'job',
              title: '职务'
            },
            {
              field: 'createTime',
              title: '任职日期'
            },
            {
              field: 'sex',
              title: '性别'
            },
            {
              field: 'country',
              title: '国籍'
            },
            {
              field: 'edu',
              title: '学历'
            },
            {
              field: 'born',
              title: '出生年月'
            },
            // {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
          ]
        ],
        reqData: function (data, callback) { // 懒加载也可以用url方式，这里用reqData方式演示
          // setTimeout(function () {  // 故意延迟一下
          //     var url = 'json/list';
          //     url += ((data ? ('_' + data.id) : '') + '.json');
          //     $.get(url, function (res) {
          //         callback(res.data);
          //     });
          // }, 800);

          //json参考数据
          //{"code": 200, "data": [{"id": "1", "name": "xxx", "haveChild": true}]}

          setTimeout(function () { // setTimeout 模拟请求时间
            var data = [{
              id: '1',
              name: '张四',
              job: 'CEO',
              createTime: '2021-09-02',
              sex: '男',
              country: '中国',
              edu: '幼儿园',
              born: '1998-07-01',
              haveChild: true
            }, {
              id: '2',
              name: '朱重八',
              job: 'CEO',
              createTime: '2021-09-02',
              sex: '男',
              country: '中国',
              edu: '幼儿园',
              born: '1998-07-01',
              haveChild: false
            }]
            callback(data);
          }, 800)

        },
        style: 'margin-top:0;',
        tree: {
          arrowType: 'arrow3', // 自定义箭头风格
          getIcon: function (d) { // 自定义图标
            // d是当前行的数据
            return '<i class="icon"></i>';
          },
          iconIndex: 1, // 折叠图标显示在第几列
          idName: 'name', // 自定义id字段的名称
          haveChildName: 'haveChild' // 自定义标识是否还有子节点的字段名称
        }
      });

    });
  </script>
</body>

</html>